<template>
  <div class="records">
    <div class="recordTitle">
      <h2>收益记录</h2>
      <span @click="close" class="iconfont iconguanbi"></span>
    </div>
    <div class="wrapper">
      <div class="recordList">
        <div class="record" v-for="(n, i) in recordsList" :key="i">
          <div class="leftPart">
            <div>
              <p>睡觉打卡</p>
              <p class="time">{{n.start_at}}</p>
            </div>
            <div class="line"></div>
            <div>
              <p>起床打卡</p>
              <p class="time">{{n.end_at}}</p>
            </div>
          </div>
          <div class="rightPart">
            <div>
              <p class="time">{{n.show_date}}</p>
              <p>收取{{n.score}}颜值</p>
            </div>
          </div>
        </div>
        <div class="noMore noData" v-show="noMore">
          <p>没有更多记录啦</p>
        </div>
      </div>
      <div class="noData" v-show="recordsList.length === 0">
        <img src="../../assets/images/nodata.png" alt="">
        <p>暂无收益记录哦，快去睡觉打卡赚颜值吧</p>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import {getRecordList} from '@/api/request'
export default {
  data () {
    return {
      scroll: null,
      noMore: false,
      requestRunning: false,
      page: 1,
      limit: 20,
      recordsList: []
    }
  },
  props: {
    isRecord: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isRecord (val) {
      if (val) {
        this.noMore = false
        this.page = 1
        this.recordsList = []
        this.getRecordList()
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.BScrollInit()
    })
  },
  methods: {
    close() {
      this.$emit("closeRecord");
    },
    getRecordList () {
      this.requestRunning = true
      getRecordList({
        page: this.page,
        limit: this.limit
      }).then(res => {
        this.requestRunning = false
        if (res.total === 0) {
          
        } else {
          this.noMore = false
          this.recordsList = this.recordsList.concat(res.data)
          if (this.scroll) {
            this.scroll.refresh()
            this.scroll.finishPullUp()
          }
          if (this.recordsList.length > 0 && res.data.length < this.limit) {
            this.noMore = true
          }
        }
      }).catch(e => {
        this.requestRunning = false
        this.$toastMessage({message: e.message, time: 3000})
      })
    },
    BScrollInit () {
      let wrapper = document.querySelector('.wrapper')
      this.scroll = new BScroll(wrapper, {
        scrollY: true,
        scrollX: false,
        bounce: false,
        pullUpLoad: {
          threshold: 50
        }
      })
      this.scroll.on('pullingUp', () => {
        if (!this.noMore) {
          if (!this.requestRunning) {
            this.page ++
            this.getRecordList()
          }
        }
      })
    }
  }
};
</script>
<style lang="less" scoped>
.records {
  height: 6.86rem;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  border-radius: 0.2rem 0.2rem 0 0;
  background: #fff;
  color: #383838;
  padding: 0.3rem 0 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;

  .recordTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.28rem 0.3rem;

    h2 {
      font-size: 0.36rem;
      color: #000;
    }
    .iconfont {
      font-size: 0.2rem;
    }
  }
  .wrapper{
    flex: 1;
    overflow: hidden;
  }
  .recordList {
    padding-top: 6px;

    .record {
      width: 6.3rem;
      padding: 0.3rem;
      border-radius: 0.2rem;
      box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.07);
      margin: 0 auto 0.24rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .leftPart {
        display: flex;
        flex-direction: column;

        > div {
          p {
            font-size: 0.28rem;
            color: #383838;
          }
          .time {
            font-size: 0.24rem;
            color: #c9c9c9;
          }
        }
        .line {
          width: 1px;
          height: 0.34rem;
          background: #c9c9c9;
          margin-left: 0.45rem;
        }
      }
      .rightPart {
        p {
          font-size: 0.28rem;
          color: #383838;
          font-weight: 500;
          text-align: center;
        }
        .time {
          font-size: 0.24rem;
          color: #383838;
        }
      }
    }
  }
  .noData {
    width: 100%;
    height: 100%;

    img {
      display: block;
      width: 2.26rem;
      height: 1.47rem;
      margin: 1.6rem auto 0.5rem;
    }
    > p {
      font-size: 0.28rem;
      color: #999999;
      width: 5.6rem;
      margin: 0 auto;
      text-align: center;
    }
  }
  .noMore{
    padding: 10px 0;
  }
}
</style>